<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>欢迎注册</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript">

        let start = 60;
        function refreshWaitCode() {
            if (start == 0) {
                return;
            }
            $("#wait-code").text("获取验证码("+ start +" 秒)");

            if (start == 1) {
                $("#wait-code").hide();
                $("#show-code").show();
            }

            start = start - 1;
        }

        function getCode() {
            let email = $("#email").val();
            let sendCodeUri = "/api/code/create/" + email;
            $.post(sendCodeUri, function (data) {
                // 一分钟之内, 只能获取一次验证码
                $("#show-code").hide();
                $("#wait-code").show();

                start = 60;
                setInterval("refreshWaitCode()", 1000);
            });
        }

        function register() {
            // 先验证 验证码
            let email = $("#email").val();
            let code = $("#code").val()
            let checkCodeUri = "/api/code/validate/" + email + "/" + code;
            $.get(checkCodeUri, function (data) {
                if (data == 0) {
                    // 验证码通过后提交注册
                    let pwd = $("#password").val();
                    let cpwd = $("#confirm-password").val()
                    if (pwd != '' && pwd == cpwd) {
                        let registerUri = "/api/user/register/" + email + "/" + pwd;
                        $.post(registerUri, function (data) {
                            console.log("register result : " + data)

                            window.location.href = "./welcome.html";
                        });
                    } else {
                        $("#error-msg").text("密码为空或者密码与确认密码不一致");
                    }

                } else if(data == 1) {
                    // 验证码错误
                    $("#error-msg").text("验证码错误");
                } else {
                    // 验证码超时
                    $("#error-msg").text("验证码超时");
                }
            });

        }

    </script>
</head>
<body>
1269285420@qq.com
<div style="margin: auto;  width: 80%;">
    <div style="margin-top: 50px; margin-left: 100px;">
        <p>
            <span id="error-msg" style="color: red; margin-left: 80px;"></span>
        </p>
        <label for="email">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮 箱</label> <input id="email" name="email" type="text" /> <br>
        <label for="password">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密 码</label> <input id="password" name="password" type="password"/> <br>
        <label for="confirm-password">确认密码</label> <input id="confirm-password" name="confirm-password" type="password"/> <br>
        <label for="code">&nbsp;&nbsp;&nbsp;验证码</label> <input id="code" name="code" type="text"/>
        <a id="show-code" href="#" style="margin-left: 15px; " onclick='getCode()'>获取验证码</a>
        <a id="wait-code" href="#" style="margin-left: 15px; display: none; color: gray;">获取验证码(60 秒)</a><br>

        <button style="margin-left: 25px; margin-top:10px; width: 180px; height: 30px; background-color: blue; color: antiquewhite;" onclick="register()">注册</button> <br>
    </div>
</div>

</body>
</html>